
define(function(){
	var data = null;
	function init($ele){
		data = $ele.data('info');

		if(!data['borderStyle']){
			$ele[0].style['borderStyle'] = data['borderStyle'] = 'solid';
			$ele[0].style['borderColor'] = data['borderColor'] = '#000';
			$ele[0].style['borderWidth'] = data['borderWidth'] = 0;
			$ele[0].style['boxShadowSize'] = data['boxShadowSize'] = '0';
			$ele[0].style['boxShadowBlur'] = data['boxShadowBlur'] = '0';
			$ele[0].style['boxShadowColor'] = data['boxShadowColor'] = '#000';
		}

		$('#Js-setting-bg').on('input',function(){
			if($ele.find('input').length){
				$ele.find('input')[0].style['backgroundColor'] = data['backgroundColor'] = $(this).val();
			}else{
				$ele[0].style['backgroundColor'] = data['backgroundColor'] = $(this).val();
			}
		});
		$('.Js-setting-range').on('rangeChange',function(event,value){
			var style = $(this).data('style');
			if(style=='opacity'){
				value = (100-value)/100;
				$ele[0].style[style] = data[style] = value;
			} else if(style == 'borderWidth' || style == 'borderRadius'){
				$ele[0].style[style] = value+'px';
				data[style] = value;
			} else if(style == 'rotate'){
				$ele.parent()[0].style.transform='rotateZ('+value+'deg)';
				data[style] = value;
			} else if(style == 'boxShadowSize'){
				$ele[0].style['boxShadow'] = '0 '+value+'px '+data['boxShadowBlur']+'px '+data['boxShadowColor'];
				data[style] = value;
			} else if(style == 'boxShadowBlur'){
				$ele[0].style['boxShadow'] = '0 '+data['boxShadowSize']+'px '+value+'px '+data['boxShadowColor'];
				data[style] = value;
			}
			else{
				$ele[0].style[style] = data[style] = value;
			}
		});

		$('#Js-setting-brColor').change(function(){
			var val = $(this).find('option:selected').val();
			if($ele.find('input').length){
				$ele.find('input')[0].style['borderStyle'] = data['borderStyle'] = val;
			}else{
				$ele[0].style['borderStyle'] = data['borderStyle'] = val;
			}
		});

		$('#Js-setting-borderColor').on('input',function(){
			if($ele.find('input').length){
				$ele.find('input')[0].style['borderColor'] = data['borderColor'] = $(this).val();
			}else{
				$ele[0].style['borderColor'] = data['borderColor'] = $(this).val();
			}
		});
		$('#Js-setting-shColor').on('input',function(){
			$ele[0].style['boxShadow'] = '0 '+data['boxShadowSize']+'px '+data['boxShadowBlur']+'px '+$(this).val();
			data['boxShadowColor'] = $(this).val();
		});
		$('input[name="txagn"]').change(function(){
			$ele[0].style['text-align'] = data['txAgn'] = $(this).val();
		});
		$('input[name="plaHolder"]').blur('input',function(){
			$ele.find('input').attr('placeholder',$(this).val());
			data['pHolder'] = $(this).val();
		});

		$ele.data('info',data);
	}
	return init;
});
